<template>
  <div class="nft m-t-60">
    <!-- 搜索 -->
    <div class="p-20-10 f-a">
      <var-input size="small" variant="outlined" placeholder="请输入藏品" v-model="query.nft_name" />
      <var-button @click="handlerSearch" class="m-l-10" type="primary">搜索</var-button>
    </div>
    <!-- 表格 -->
    <div class="p-10">
      <var-table>
        <thead>
          <tr>
            <th>平台</th>
            <th>藏品</th>
            <th>价格</th>
            <th>时间</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="l in tableData" :key="l.id">
            <td>{{ l.name }}</td>
            <td>{{ l.nft_name }}</td>
            <td>{{ l.price }}</td>
            <td>{{ timenNew(l.time) }}</td>
          </tr>
        </tbody>

        <template #footer>
          <div class="table-example-footer">
            <!-- 手机预览模式下分页使用了simple为true的模式，对小屏设备更友好 -->
            <var-pagination :simple="false" :current="pageCurrent" :total="total" :size-option="[6, 10]"
              @change="changePage" />
          </div>
        </template>
      </var-table>
    </div>
  </div>
</template>

<script>
import { reactive, toRefs } from 'vue'
import { Register } from "@/api/user"
import dayjs from 'dayjs'
// varlet 单独引入
import { Snackbar } from '@varlet/ui'
export default {
  name: "NftList",
  setup() {
    const state = reactive({
      tableData: [],
      query: {
        pageSize: 6,
        nft_name: "",
        pageCurrent: 1,
      },
      total: "",
      value: "",
    })
    const toggleTheme = () => {
      state.currentTheme = state.currentTheme ? null : Themes.dark
      StyleProvider(state.currentTheme)
    }
    const init = () => {
      Register(state.query).then(res => {
        state.tableData = res.data.list;
        state.total = res.data.total;
        console.log(res)
      }).catch(error => {
        Snackbar.error(error.message)
        console.log(error.message)
      })
    }
    init()
    // 时间
    const timenNew = (value) => {
      return dayjs(value).format("YYYY-MM-DD HH:mm:ss");
    }
    const handlerSearch = () => {
      init();
    }
    const changePage = (value) => {
      state.query.pageCurrent = value;
      init();
    }
    return {
      ...toRefs(state),
      toggleTheme,
      timenNew,
      handlerSearch,
      changePage
    }
  }
}
</script>

<style lang="scss" scoped>
.table-example-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 60px;
  padding: 0 16px;
}

.var-table__main>table th,
.var-table__main>table td {
  text-align: center;
  line-height: 46px;
  padding: 0;
}
</style>